<html>

<head>
    <meta charset="utf-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            display: inline-block
        }
    </style>
</head>

<body>
    <div id="output" style="height: 400px; width: 600px; background: #eee">
    </div>
    <button id="rock" style="height: 40px; width: 80px">石头</button>
    <button id="scissor" style="height: 40px; width: 80px">剪刀</button>
    <button id="paper" style="height: 40px; width: 80px">布</button>
</body>
<script>
    const $button = {
        rock: document.getElementById('rock'),
        scissor: document.getElementById('scissor'),
        paper: document.getElementById('paper')
    }

    const $output = document.getElementById('output')

    Object.keys($button).forEach(key => {
        $button[key].addEventListener('click', function () {
            fetch(`http://${location.host}/game?action=${key}`)
                .then((res) => {
                    return res.text()
                })
                .then((text) => {
                    $output.innerHTML += text + '<br/>';
                })
        })
    })
</script>

</html>